<template>
  <div class="login-container">
    <div class="login-box">
      <h1>Login</h1>
      <form @submit.prevent="login" method="post">
        <div class="form-group">
          <label for="account">Account:</label>
          <input type="text" id="account" v-model="account" required />
        </div>
        <div class="form-group">
          <label for="password">Password:</label>
          <input type="password" id="password" v-model="password" required />
        </div>
        <div class="form-group">
          <button type="submit">Login</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            account: '',
            password: '',
        };
    },
    methods: {
        async login() {
            try {
                const response = await axios.post('http://192.168.129.76:8080/api/login', {
                    account: this.account,
                    password: this.password,
                });
                // 检查响应状态码
                if (response.data.code === 200) {
                    // 将token和role保存到本地存储
                    localStorage.setItem('token', response.headers.token);
                    localStorage.setItem('role', response.headers.role);
                    localStorage.setItem('username', this.account); // 存储用户名
                    // 打印完整的response对象信息
                    console.log('完整的response对象信息如下：', response);
                    // 打印token和role的值，查看是否正确获取并存储
                    console.log('获取到的token:', response.headers.token);
                    console.log('获取到的role:', response.headers.role);
                    alert('登录成功');
                    // 根据角色跳转到不同的页面
                    this.$router.push(this.getRoleRoute());
                } else {
                    alert('登录失败');
                }
            } catch (error) {
                console.error('登录错误:', error);
                alert('登录失败');
            }
        },
        getRoleRoute() {
            const role = localStorage.getItem('role');
            return role === '07tB' ? '/admin' : role === 'Uim5' ? '/teacher' : '/';
        },
    },
};
</script>

<style scoped>
/* 设置整个页面的背景图片 */
body {
  background-image: url('../../public/600.jpg') no-repeat center center / cover;
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-box {
  background-color: rgba(255, 255, 255, 0.2); /* 设置登录框半透明背景 */
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 300px;
  transition: transform 0.3s ease-in-out;
}

.login-box:hover {
  transform: translateY(-2px);
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #666;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.form-group input:focus {
  border-color: #007bff;
}

.form-group button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.form-group button:hover {
  background-color: #0056b3;
}
</style>